<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul.score>li:first-child {
            color: green;
        }
        ul.score>li:last-child {
            color: brown;
        }
        div>p:first-of-type {
            color: orange
        }
        .nth-test-1>li:nth-child(3) {
            color: red;
        }
        .nth-test-2>li:nth-child(odd) {
            color: green;
        }
        .nth-test-2>li:nth-child(even) {
            color: orange;
        }
        .nth-test-3>li:nth-child(2n+1) {
            color:green
        }
        .nth-test-3>li:nth-child(2n) {
            color: orange;
        }
        .nth-test-4>li:nth-child(-n+3) {
            color: blue;
        }
        .nth-test-5>li:nth-of-type(2n+1) {
            color: gold;
        }
        .nth-test-6>li:nth-last-child(-n+2) {
            color: pink;
        }
        .nth-test-7>li:nth-last-of-type(3) {
            color: purple;
        }
        .nth-test-8:empty {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1>结构伪类</h1>
    <h2>first-child/last-child 使用</h2>
    <ul class="score">
        <li>张三 99</li>
        <li>李四 86</li>
        <li>王五 71</li>
        <li>赵六 62</li>
    </ul>
    <h2>first-of-type 的使用</h2>
    <div class="say">
        <p>你好呀</p>
        <p>很高兴认识你</p>
        <p>nice to meet you</p>
    </div>
    <h2>nth-child 的使用</h2>
    <strong style="color: red">
        nth-child()的括号中的内容为 <code>a * n + b</code> 的格式，
        然后与元素的顺序匹配，如果元素顺序满足公式，则使用指定样式，n 从 0 开始。
        <br>
        例如 2n 匹配 2,4,6,8 ... 等偶数序列，2n+1 匹配 1,3,5,7...，
        -n+5 匹配 5,4,3,2,1。
    </strong>
    <h3>指定具体第几个元素</h3>
    <p>下面使用 nth-child(3) 指定第三个元素属性。</p>
    <ul class="nth-test-1">
        <span>xxx</span>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-child(even) / nth-child(odd) 指定奇偶样式</h2>
    <ul class="nth-test-2">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-child(2n) / nth-child(2n+1) 指定奇偶样式</h2>
    <ul class="nth-test-3">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-child(-n+3) 选中前3个元素</h2>
    <ul class="nth-test-4">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-of-type 可以设置按类型选择</h2>
    <ul class="nth-test-5">
        <li>第1个</li>
        <li>第2个</li>
        <span>aaa</span>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-last-child 可以选择倒数第几个</h2>
    <ul class="nth-test-6">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>使用 nth-last-of-type 可以按类型选择倒数第几个</h2>
    <ul class="nth-test-7">
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <span>xxx</span>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <h2>empty伪类，选中无内容的元素</h2>
    <div class="nth-test-8"></div>
</body>
</html>